<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生GPA统计图表</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <h3 class="text-center mb-4">学生GPA预测统计</h3>
    <!-- 为ECharts准备的DOM容器，确保有明确宽高 -->
    <div id="main" style="width: 600px;height:400px;"></div>
</div>

<script>
    // 初始化图表
    const chartDom = document.getElementById('main');
    const myChart = echarts.init(chartDom);

    // 发送AJAX请求获取数据
    function fetchData() {
        fetch('student-gpa-stats')
            .then(response => {
                if (!response.ok) {
                    throw new Error('请求失败，状态码：' + response.status);
                }
                return response.json();
            })
            .then(data => {
                console.log('获取到的数据:', data); // 调试用，查看数据是否正确

                if (data.length === 0) {
                    alert('数据为空，请检查Servlet返回数据');
                    return;
                }

                // 提取数据
                const Getname = data.map(item => item.name);
                const gpaValues = data.map(item => item.gpa);

                // 配置图表选项（直接使用对象字面量）
                myChart.setOption({
                    title: { text: '绩点TOP1-3' },
                    tooltip: {},
                    xAxis: {type: 'category', data: Getname},
                    yAxis: {type: 'value'},
                    series: [
                        { type: 'bar', data: gpaValues}]

                });
            })
            .catch(error => {
                console.error('获取数据失败:', error);
                alert('数据获取失败，请检查：\n1. Servlet路径是否正确\n2. 服务器是否正常运行');
            });
    }

    // 页面加载后立即获取数据
    window.onload = fetchData;

    // 监听窗口大小变化，自适应图表
    window.addEventListener('resize', () => {
        myChart.resize();
    });
</script>
</body>
</html>